<script setup lang="ts">
import { unwrapApiBody, type ApiResponse } from '../../../utils/http/factory'
import { renderSafeMarkdown } from '../../../utils/render-markdown'
import { formatOccurredOnDisplay, occurredOnToIsoAttr } from '../../../utils/timeline-datetime'

definePageMeta({
  layout: 'public',
})

const route = useRoute()
const publicSlug = computed(() => route.params.publicSlug as string)
const postSlug = computed(() => route.params.postSlug as string)

type Post = {
  title: string
  slug: string
  excerpt: string
  bodyMarkdown: string
  coverUrl: string | null
  publishedAt: Date | null
}

const { data, pending, error } = await useAsyncData(
  () => `public-post-${publicSlug.value}-${postSlug.value}`,
  async () => {
    const path = `/api/public/profile/${encodeURIComponent(publicSlug.value)}/posts/${encodeURIComponent(postSlug.value)}`
    const res = await $fetch<ApiResponse<{ post: Post }>>(path)
    return unwrapApiBody(res).post
  },
  { watch: [publicSlug, postSlug] },
)

const renderedBody = computed(() => (data.value ? renderSafeMarkdown(data.value.bodyMarkdown) : ''))

const publishedAtLabel = computed(() =>
  data.value?.publishedAt != null ? formatOccurredOnDisplay(data.value.publishedAt) : '',
)

const publishedAtIso = computed(() =>
  data.value?.publishedAt != null ? occurredOnToIsoAttr(data.value.publishedAt) : '',
)

watchEffect(() => {
  if (data.value?.title) {
    useHead({ title: data.value.title })
  }
})
</script>

<template>
  <UContainer class="py-10 space-y-6">
    <div v-if="pending" class="text-muted">
      加载中…
    </div>
    <UAlert v-else-if="error" color="error" title="文章不存在或未公开" />
    <template v-else-if="data">
      <UButton :to="`/@${publicSlug}`" variant="ghost" color="neutral" size="sm" class="-ml-2">
        ← 返回主页
      </UButton>
      <div v-if="data.coverUrl" class="flex justify-center">
        <img
          :src="data.coverUrl"
          alt=""
          class="max-h-64 w-full max-w-2xl rounded-lg object-cover border border-default"
        >
      </div>
      <p v-if="publishedAtLabel" class="text-sm tabular-nums text-muted">
        <time :datetime="publishedAtIso">{{ publishedAtLabel }}</time>
      </p>
      <h1 class="text-2xl font-semibold">
        {{ data.title }}
      </h1>
      <p v-if="data.excerpt" class="text-muted">
        {{ data.excerpt }}
      </p>
      <article
        class="prose dark:prose-invert max-w-none prose-a:text-primary prose-img:rounded-lg"
        v-html="renderedBody"
      />
      <PostComments mode="public-post" :public-slug="publicSlug" :post-slug="postSlug" />
    </template>
  </UContainer>
</template>
